<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <base th:href="${#httpServletRequest.getScheme()+'://'+#httpServletRequest.getServerName()+':'+#httpServletRequest.getServerPort()+''+#httpServletRequest.getContextPath()+'/'}" href="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait" />
    <!-- QQ设置全屏 -->
    <meta name="x5-fullscreen" content="true" />
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait" />
    <!-- uc设置全屏 -->
    <meta name="full-screen" content="yes" />
    <!-- 禁止识别电话号码和邮件号码 -->
    <meta name="format-detection" content="telephone=no,email=no"/>
    <title>爱智付-用户注册</title>
    <script type="text/javascript" th:src="@{reg/js/header.js}" src="js/header.js"></script>
    <link rel="stylesheet" th:href="@{reg/css/style.css}" href="css/style.css" />
</head>

<body class="register">
    <div class="cover wrap">
        <div class="top-area" id="js-top-area"><span class="middle"></span><div class="vm inline">
            <p class="tip-1">邀请人ID</p>
            <p th:text="${code==null}?'无邀请码':'邀请码：'+${code}" class="tip-2"></p>
        </div></div>
        <form class="form-wrap" target="hidden_iframe" id="js-my-form" method="post" action="user/reg">
            <input type="hidden" name="pushCode" value="" th:value="${code}"/>
            <div class="form-item clearfix js-form-item"><input type="tel" name="userName" class="input-txt js-input-txt" placeholder="请输入手机号码" autocomplete="off" id="js-user-phone" /></div>
            <div class="form-item clearfix js-form-item"><input type="text" name="nickName" class="input-txt js-input-txt" placeholder="请输入昵称，建议输入真实姓名" autocomplete="off" id="js-user-nick" /></div>
            <div class="form-item clearfix js-form-item"><input type="text" name="checkCode" class="input-txt js-input-txt" placeholder="请输入图形验证码" autocomplete="off" id="js-check-code" /><img src="check_code/web" class="check-code" id="js-get-check-code" /></div>
            <div class="form-item clearfix js-form-item"><input type="text" name="smscode" class="input-txt js-input-txt" placeholder="请输入短信验证码" autocomplete="off" id="js-sms-code" /><a href="javascript:;" class="sms-code" id="js-get-sms-code">获取验证码</a></div>
            <div class="form-item clearfix js-form-item"><input type="password" name="pwd" class="input-txt js-input-txt" placeholder="请输入密码(6-20位字母或数字)" autocomplete="new-password" id="js-user-password" /></div>
            <div class="form-item clearfix js-form-item"><input type="password" name="pwd2"  class="input-txt js-input-txt" placeholder="请再次输入密码" autocomplete="off" id="js-repeat-password" /></div>
            <div class="error-tip js-error-tip vh" id="js-error-tip"></div>
        </form>
        <div class="bottom-area">
            <a href="javascript:;" class="btn-register" id="js-btn-register">立即注册</a>
            <a href="javascript:;" class="btn-download" id="js-btn-download">点击下载</a>
        </div>
        <div class="cover pop-area js-pop-area hide" id="js-pop-loading">
            <div class="cover mask-layer"></div>
            <div class="pop-box pop-loading"></div>
        </div>
    </div>
    <iframe id="hidden_iframe" name="hidden_iframe" class="hide"></iframe>
    <script type="text/javascript" th:src="@{reg/js/zepto-1.2.0.min.js}" src="js/zepto-1.2.0.min.js"></script>
    <script type="text/javascript">
        // 前端所需变量
        var win_height = $(window).height(),  //获取当前页面高度
            js_top_area = $("#js-top-area"), //顶部区域
            js_my_form = $("#js-my-form"), // 提交表单
            js_form_item = $(".js-form-item"), //表单项
            js_input_txt = $(".js-input-txt"), //输入框集合
            js_user_phone = $("#js-user-phone"), //手机号码
            js_user_nick = $("#js-user-nick"),
            js_check_code = $("#js-check-code"), //图形验证码
            js_get_check_code = $("#js-get-check-code"), //刷新图形验证码
            js_sms_code = $("#js-sms-code"), //短信验证码
            js_get_sms_code = $("#js-get-sms-code"), //发送短信验证码
            js_user_password = $("#js-user-password"), // 用户密码
            js_repeat_password = $("#js-repeat-password"), // 重复密码
            js_error_tip = $("#js-error-tip"), //错误提示
            js_pop_area = $(".js-pop-area"), //弹窗区域
            js_pop_loading = $("#js-pop-loading"), // 加载中弹窗
            js_btn_register = $("#js-btn-register"), //立即注册按钮
            js_btn_register_dom = js_btn_register[0],
            js_btn_download = $("#js-btn-download"); // 点击下载按钮

        // 注册成功的回调
        function callBack(rs) {
            js_pop_loading.addClass("hide");
            js_btn_register_dom.canNotRegister = false;
            if(rs.status==200){
                window.location.href="/user/down";
            }else{
                showErrorMsg(rs.message);
            }
        }

        // 显示登录错误提示信息
        function showErrorMsg(msg) {
            js_error_tip.html(msg).removeClass("vh");
        }

        // 隐藏登录错误提示信息
        function hideErrorMsg() {
            js_error_tip.addClass("vh");
        }

        // 去除字符串首尾两端空格
        function trim(str) {
            var reg = /^\s+|\s+$/g;
            return str.replace(reg, "");
        }

        // 手机号码校验
        function checkPhoneNum(phoneNum) {
            var reg = /^1\d{10}$/;
            return reg.test(phoneNum);
        }

        // 密码校验
        function checkUserPwdLegal(str) {
            var re = /^[a-z\d]{6,20}$/i;
            return re.test(str);
        }

        // 获取验证码倒计时
        function countDown(time) {
            js_get_sms_code.html(time + "s后重新发送");
            time--;
            if (time >= 0) {
                setTimeout(function() {
                    countDown(time);
                }, 1000);
            } else {
                js_get_sms_code.html("重新发送");
                js_get_sms_code.removeClass("disabled");
            }
        }

        // 获取短信验证码
        function getSmsCode() {
            // ajax提交表单
            $.ajax({
                type: "post",
                url: "api/send_msg/web",
                data: {
                    mobile: js_user_phone.val(),
                    checkCode: js_check_code.val()
                },
                success: function(data) {
                    //console.log(data, typeof data);
                    //data = JSON.parse(data);
                    if (data.status == 200) {
                        countDown(60);
                    } else {
                        showErrorMsg(data.message);
                        refreshCheckCode();
                        js_check_code.val("");
                        js_get_sms_code.removeClass("disabled");
                    }
                },
                error: function() {

                }
            });
        }

        // 是否可以发送短信验证码
        function canSendSmsCode() {
            var val1 = js_user_phone.val(),
                val2 = js_check_code.val(),
                isValid = true;
            val1 = trim(val1);
            val2 = trim(val2);
            js_user_phone.val(val1);
            js_check_code.val(val2);
            if (val1.length === 0) {
                showErrorMsg("请输入手机号码");
                isValid = false;
            } else if(!checkPhoneNum(val1)) {
                showErrorMsg("请输入正确的手机号码");
                isValid = false;
            } else if (val2.length === 0) {
                showErrorMsg("请输入图形验证码");
                isValid = false;
            }
            return isValid;
        }

        // 刷新图形验证码
        function refreshCheckCode() {
            var _t = +new Date();
            js_get_check_code.attr("src", "check_code/web?_t" + _t);
        }

        // 点击刷新图形验证码
        js_get_check_code.on({
            "touchend":function () {
                refreshCheckCode();
            }
        });

        // 点击获取短信验证码
        js_get_sms_code.on({
            "touchend": function() {
                if (canSendSmsCode() && !$(this).hasClass("disabled")) {
                    $(this).addClass("disabled");
                    getSmsCode();
                }
            }
        });

        // 用户确定注册校验
        function checkUserRegister() {
            var val1 = js_user_phone.val(),
                val2 = js_sms_code.val(),
                val3 = js_user_password.val(),
                val4 = js_repeat_password.val(),
                val5 = js_check_code.val(),
                va16 = js_user_nick.val(),
                isValid = true;
            val1 = trim(val1);
            val2 = trim(val2);
            val3 = trim(val3);
            val4 = trim(val4);
            val5 = trim(val5);
            va16 = trim(va16);
            js_user_phone.val(val1);
            js_sms_code.val(val2);
            js_user_password.val(val3);
            js_repeat_password.val(val4);
            js_check_code.val(val5);
            if (val1.length === 0) {
                showErrorMsg("请输入手机号码");
                isValid = false;
            } else if (!checkPhoneNum(val1)) {
                showErrorMsg("输入的手机号码格式不正确");
                isValid = false;
            }else if(va16.length === 0){
                showErrorMsg("请输入昵称");
                isValid = false;
            }else if (val5.length === 0) {
                showErrorMsg("请输入图形验证码");
                isValid = false;
            }else if (val2.length === 0) {
                showErrorMsg("请输入短信验证码");
                isValid = false;
            } else if (val3.length === 0) {
                showErrorMsg("请输入密码");
                isValid = false;
            } else if (!checkUserPwdLegal(val3)) {
                showErrorMsg("输入的密码格式不正确");
                isValid = false;
            } else if (val4.length === 0) {
                showErrorMsg("请再次输入密码");
                isValid = false;
            } else if (val3 !== val4) {
                showErrorMsg("两次输入的密码不一致");
                isValid = false;
            }
            return isValid;
        }

        // 移动端软键盘监听（弹出，收起）
        // 监听resize ( Android )
        function watchKeyBoardOnAndroid() {
            $(window).resize(function () {
                var this_height = $(this).height(),
                    distance = win_height - this_height;
                if ( distance > 140 ) {
                    //键盘弹出
                    setTimeout(function() {
                        js_top_area.css({
                            "margin-top": -268
                        });
                    }, 500);
                } else {
                    //键盘收起
                    setTimeout(function() {
                        js_top_area.css({
                            "margin-top": 32
                        });
                    }, 500);
                }
            });
        }
        watchKeyBoardOnAndroid();

        // 登录时在每个校验表单元素上监听事件
        js_input_txt.on({
            "keyup": function(e) {
                if (checkUserRegister()) {
                    hideErrorMsg();
                }
            },
            "focus": function() {
                $(this).closest(".form-item").addClass("focus");
            },
            "blur": function() {
                $(this).closest(".form-item").removeClass("focus");
            }
        });

        // 点击注册
        js_btn_register.on({
            "touchstart": function() {
                $(this).addClass("active");
            },
            "touchend": function() {
                $(this).removeClass("active");
                if(checkUserRegister() && !this.canNotRegister) {
                    var that = this;
                    this.canNotRegister = true;
                    js_pop_loading.removeClass("hide");
                    //提交表单
                    js_my_form.submit();
                }
            }
        });

        // 点击立即下载
        js_btn_download.on({
            "touchstart": function() {
                $(this).addClass("active");
            },
            "touchend": function() {
                $(this).removeClass("active");
                window.location.href = "/user/down";
            }
        });
    </script>
</body>

</html>